<%--
  Created by IntelliJ IDEA.
  User: JiangFan
  Date: 2019/3/8
  Time: 10:39
  Description:  添加配置界面，用来新建商品配置信息
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<title>新增配置</title>
	<script src="../js/jquery-3.3.1.min.js"></script>
	<script src="../js/configuration.js"></script>
	<%--该方法用来定义鼠标离开焦点时间--%>
	<script>
        $(function () {
            $("[name=txtColor]").focus(function(){
                if($(this).val()=="请输入新颜色"){
                    $(this).val("")
                }
            }).blur(function(){
                if($(this).val()==""){
                    $(this).val("请输入新颜色");
                }
            });
            $("[name=txtSize]").focus(function(){
                if($(this).val()=="请输入新尺寸"){
                    $(this).val("")
                }
            }).blur(function(){
                if($(this).val()==""){
                    $(this).val("请输入新尺寸");
                }
            });
            $("[name=txtMemory]").focus(function(){
                if($(this).val()=="请输入新内存"){
                    $(this).val("")
                }
            }).blur(function(){
                if($(this).val()==""){
                    $(this).val("请输入新内存");
                }
            });
            $("[name=txtType]").focus(function(){
                if($(this).val()=="请输入新类型"){
                    $(this).val("")
                }
            }).blur(function(){
                if($(this).val()==""){
                    $(this).val("请输入新类型");
                }
            });
            $("[name=txtFID]").focus(function(){
                if($(this).val()=="请输入父类类型"){
                    $(this).val("")
                }
            }).blur(function(){
                if($(this).val()==""){
                    $(this).val("请输入父类类型");
                }
            });
        });
	</script>
	<%--该事件用来判断各事件是否可用--%>
	<script>
        // 判断颜色是否可用方法
        $(function () {
            //颜色失去焦点事件
            $("#txtColor").blur(function () {
                $.ajax({
                    type:"post",
                    url:"/ColorServlet",
                    data:{"op":"queryColorOne","txtColor":$("#txtColor").val()},
                    success:function (txt) {
                        var str=JSON.stringify(txt);
                        $("#color1").text(str);
                    }
                });
            });
            //添加颜色
            $("#subc").on("click",function () {
                $.ajax({
                    type:"post",
                    url:"/ColorServlet",
                    //调用添加颜色事件，，传入颜色是否可用结果
                    data:{"op":"addColor","color1":$("#color1").text()},
                    success:function (result) {
                        var str=JSON.stringify(result);
                        //alert(str);
                        $("#color1").text(str);
                    },
                    error:function () {
                        alert("异常");
                    }
                });
            });
            //内存失去焦点
            $("#txtMemory").blur(function () {
                $.ajax({
                    type:"post",
                    url:"/MemoryServlet",
                    data:{"op":"queryMemoryOne","txtMemory":$("#txtMemory").val()},
                    success:function (t) {
                        var str=JSON.stringify(t);
                        $("#memory").text(str);
                    }
                });
            });
            // 添加内存
            $("#subm").on("click",function () {
                $.ajax({
                    type:"post",
                    url:"/MemoryServlet",
                    //调用添加颜色事件，，传入颜色是否可用结果
                    data:{"op":"addMemory","memory":$("#memory").text()},
                    success:function (result) {
                        var str=JSON.stringify(result);
                        //alert(str);
                        $("#memory").text(str);
                    },
                    error:function () {
                        alert("异常");
                    }
                });
            });
            // 尺寸失去焦点
            $("#txtSize").blur(function () {
                $.ajax({
                    type:"post",
                    url:"/SizeServlet",
                    data:{"op":"querySizeOne","txtSize":$("#txtSize").val()},
                    success:function (txt) {
                        var str=JSON.stringify(txt);
                        $("#size1").text(str);
                    }
                });
            });
            //添加尺寸
            $("#subs").on("click",function () {
                $.ajax({
                    type:"post",
                    url:"/SizeServlet",
                    //调用添加颜色事件，，传入颜色是否可用结果
                    data:{"op":"addSize","size":$("#size1").text()},
                    success:function (result) {
                        var str=JSON.stringify(result);
                        //alert(str);
                        $("#size1").text(str);
                    },
                    error:function () {
                        alert("异常");
                    }
                });
            });
            // 类型失去焦点
            $("#txtType").blur(function () {
                $.ajax({
                    type:"post",
                    url:"/MemoryServlet",
                    data:{"op":"queryMemoryOne","txtType":$("#txtType").val()},
                    success:function (t) {
                        var str=JSON.stringify(t);
                        $("#memory").text(str);
                    }
                });
            });
            // 添加类型
            $("#subt").on("click",function () {
                $.ajax({
                    type:"post",
                    url:"/TypeServlet",
                    //调用添加颜色事件，，传入颜色是否可用结果
                    data:{"op":"addType","type1":$("#type1").text(),"txtFID":$("txtFID").onchange},
                    success:function (result) {
                        var str=JSON.stringify(result);
                        $("#type1").text(str);
                    },
                    error:function () {
                        alert("异常");
                    }
                });
            });
        });
	</script>
	<script>
        $(function () {
            $("#txtFID").blur(function() {
                $.ajax({
                    type:"post",
                    url:"/TypeServlet",
                    data:{"op":"queryFaName"},
                    success:function (result) {
                        var json=eval('('+result+')');
                        //循环输出结果
                        for(var i=0;i<json.length;i++){
                            var op=$("<option id='"+json[i].type_id+"' value='"+json[i].type_id+"'>"+json[i].type_name+"</option>");
                            $("#txtFID").append(op);
                        }
                    },
                    error:function () {
                        alert("异常");
                    }
                });
            });
        });
	</script>
</head>
<body>
<table>
	<%--颜色--%>
	<tr>
		<td>
			<from action="" method="post" id="colf">
				<input type="text" name="txtColor" id="txtColor" value="请输入新颜色">
				<input type="button" id="subc" value="添加"><br/>
				<span id="color1"></span>
			</from>
		</td>
	</tr>
	<%--尺寸--%>
	<tr>
		<td>
			<from action="" method="post">
				<input type="text" name="txtSize" id="txtSize" value="请输入新尺寸" >
				<input type="button" id="subs" value="添加"><br/>
				<span id="size1"></span>
			</from>
		</td>
	</tr>
	<%--内存--%>
	<tr>
		<td>
			<from action="" method="post">
				<input type="text" name="txtMemory" id="txtMemory" value="请输入新内存" onchange="">
				<input type="button" id="subm" value="添加"><br/>
				<span id="memory"></span>
			</from>
		</td>
	</tr>
	<%--type--%>
	<tr>
		<td>
			<from action="" method="post">
				<input type="text" name="txtType" id="txtType" value="请输入新类型" ><br/>
				<span id="type1"></span><br/>
				<select  id="txtFID" name="txtFID" >
					<option>请选择父类</option>
				</select>
				<input type="button" id="subt" value="提交">
			</from>
		</td>
	</tr>
</table>
</body>
</html>
